<template>
	<view>
		<view>
			<view class="search-input">
				<uni-icons type="search" size="16"></uni-icons>
				<input type="text" v-model="searchWords" placeholder="输入搜索内容" class="ml-20" style="font-size: 24rpx;" />
				<view class="font-24 mr-20" @click="search">搜索</view>
			</view>
			<view class="mt-20 mb-20">
				<scroll-view scroll-x="true">
					<view style="white-space: nowrap;width: 100%;">
						<view class="category" :class="[selectIndex === index ? 'selected' : '']"
							v-for="(item, index) in category" :key="index" @click="setIndex(index)">{{item.title}}</view>
					</view>
				</scroll-view>
			</view>
			<view class="pb-10 pl-30 pr-30" v-for="(item, index) in lists" :key="index"
				@click="$goRoute.goUrl('/pages/papers/details?id='+item.id)">
				<view class="bg-white border-radius p-30 flex items-center">
					<uni-icons custom-prefix="iconfont" type="icon-jintiaowenjuan" size="30"
						color="#46B4B1"></uni-icons>
					<view class="ml-20" style="width: 70vw;">
						<view class="font-26 font-no-wrap">{{item.title}}</view>
						<view class="font-24 font-grey mt-10 font-no-wrap">{{item.info}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		list
	} from '../../api/papers.js';
	import {
		getCategory
	} from '../../api/common';
	export default {
		data() {
			return {
				searchWords: '',
				selectIndex: 0,
				category: [],
				filter: {
					category: ''
				},
				lists: []
			};
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '河口人才招聘小程序',
				path: '/pages/papers/papers'
			}
		},
		onLoad() {
			this.getCategories()
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			setIndex(index) {
				this.selectIndex = index
				this.filter.category = this.category[index].title
				this.search()
			},
			search() {
				this.pageNo = 1
				this.getList()
			},
			getList() {
				uni.showLoading({
					title: '加载中'
				})
				list({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					title: this.searchWords,
					...this.filter
				}).then(res => {
					if (this.pageNo === 1) {
						this.lists = res.result.records
					} else {
						this.lists.push(...res.result.records)
					}
					this.pageNo += 1
					uni.hideLoading()
				})
			},
			getCategories() {
				getCategory({
					pcode: 'questionnaire'
				}).then(res => {
					this.category = res.result
					this.filter.category = res.result[0].key
					this.getList()
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.search-input {
		background-color: rgba(255, 255, 255, .8);
		height: 30px;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		padding: 10rpx 30rpx;
		width: 84vw;
		margin: auto;

		input {
			width: 80%;
		}
	}

	.category {
		padding: 10rpx 20rpx;
		background-color: #DDDDDD;
		border-radius: 50rpx;
		opacity: 1;
		font-size: 26rpx;
		margin-left: 30rpx;
		text-align: center;
		display: inline-block;
	}

	.selected {
		color: white;
		background-color: #46B4B1;
	}
</style>